<template>
    <div class="home-new">
        <div class="home-new-title">
            <h3>每周上新</h3>
        </div>
        <ul>
            <li v-for="item in newList" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p><span>￥</span>{{ item.retail_price }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup>
const newList = [
    {
        name:'床上四件套',list_pic_url:'./images/new1.jpg',retail_price:'1999.00'
    },
    {
        name:'香奈儿包包',list_pic_url:'/images/new2.jpg',retail_price:'29999.00'
    },  
    {
        name:'bjd娃娃',list_pic_url:'/images/new3.jpg',retail_price:'15000.00'
    },  
    {
        name:'轻奢珍珠项链',list_pic_url:'/images/new4.jpg',retail_price:'12888.00'
    },
]
</script>
<style lang="less" scoped> 
.home-new {
    .home-new-title {
    text-align: center; 
    font-size: 16px;
    margin-top: 1.6rem; 
    height: 50px;
    h3 {
    width: 50%;
    border-top: 2px solid #ccc; 
    padding-top: 8px;
    margin: 0 auto;
    } 
    }
    ul {
    display: flex;
    justify-content: space-between; flex-wrap: wrap;
    padding: 1rem 0 0;
    background-color: #f9f9f9; 
    li {
    width: 49.5%; img {
    width: 100%; }
    p {
    text-align: center; margin: 0.5rem 0;
    }
    span {
    color: #FF8000;  font-size: 12px;
   } 
  }
 }
}
</style>